<template>
    <div class="selectUser">
        <el-form>
            <el-form-item>
                <el-radio-group v-model="radio">
                    <el-radio label="1">添加人员</el-radio>
                    <el-radio label="2">添加发起人</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="选择人员" v-if="radio == '1'">
                <el-select class="dept" v-model="userValue" filterable placeholder="请选择人员">
                    <el-option v-for="item in userList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择发起人" v-else-if="radio == '2'">
                <el-select class="dept" v-model="initUserValue" multiple filterable placeholder="请选择人员">
                    <el-option v-for="item in initUserList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center;">
            <el-button @click="commit">关闭</el-button>
        </div>
    </div>
</template>
  
<script>
import { queryUserByName, queryRoleByName, queryDeptByName } from "@/api/activiti/customprocess"
export default {
    name: 'selectUserAssignee',
    props: {
        valueList: {
            type: Array,
        },
        valueType: {
            type: String
        },
    },
    data() {
        return {
            radio: "1",
            deptList: [{
                key: '0',
                value: "1",
                label: '会签'
            },
            {
                key: '1',
                value: "0",
                label: '不是会签'
            }],
            roleList: [{
                key: '0',
                value: "1",
                label: '会签'
            },
            {
                key: '1',
                value: "0",
                label: '不是会签'
            }],
            initUserList: [
                {
                    key: '0',
                    value: "${applyUserId}",
                    label: '发起人'
                }
            ],
            initUserValue: '',
            userList: [],
            roleValue: '',
            userValue: '',
            deptValue: ''
        }
    },
    mounted() {
        console.log('selectUser: mounted')
        this.init()
    },
    methods: {
        async init() {
            let userResponse = await queryUserByName('')
            this.userList = userResponse.data.map(item => {
                return { value: item.userName, key: item.userName, label: item.nickName }
            })
            console.log("selectUserAssignee: userList", this.userList, "value list", this.valueList,'value type',this.valueType)
            if (this.valueType == '1') {
                this.userValue = this.valueList
            } else if (this.valueType == '2') {
                this.initUserValue = this.valueList
            }
            this.radio = this.valueType
        },
        commit() {
            let userStrLabel = ''
            let userStrValue = ''
            if (this.radio == '1') {
                console.log("selectUserAssignee: userValue", this.userValue)
                if (this.userValue != undefined) {
                    let userLabels = this.userList.find(i => i.value == this.userValue)
                    userStrLabel = userLabels.label
                    userStrValue = this.userValue
                    console.log('selectUser: user select value', userStrValue, ' lables ', userStrLabel)
                }
                this.$emit('userCallBack', this.radio,userStrValue, userStrLabel)
            } else if (this.radio == '2') {
                let userStrLabel = this.initUserList.find(i => i.value == this.initUserValue).label
                let userStrValue = this.initUserValue.join()
                console.log('selectUser: user select value', userStrValue, ' lables ', userStrLabel)
                this.$emit('userCallBack', this.radio,userStrValue, userStrLabel)
            } else {
                this.$emit('userCallBack', "", "", "")
            }
        }
    }
}
</script>
<style  scoped>
.selectUser {
    display: flex;
    flex-direction: column;
    align-items: center;
}
</style>
  